<template>
    <div class="container">
        <div class="wrap-container" :style="{'height': wrapHeight + 'px'}">
            <lottie class="lottie-wrap" @click="playLottie" src='http://wtowto7207.cn/lottie/zyl%27s_deep_loading.json' loop=true speed="1" ref='lottie'></lottie>
        </div>
    </div>
</template>
<style scoped>
    .wrap-container {
        width: 750px;
        align-items: center;
        justify-content: center;
    }

    .wrap {
        width: 200px;
        height: 200px;
        border-radius: 100px;
        background-color: black;
    }

    .lottie-wrap{
        width: 750px;
        height: 750px;
    }

</style>
<script>
    import {
        Utils
    } from "weex-ui";
    export default {
        data() {
            return {
                wrapHeight: 1200,
                title: 'null',
                play: false,
                status: 'play'
            }
        },
        created() {
            // this.wrapHeight = Utils.env.getPageHeight();
            this.$navigator.setLeftItem({
                text: '返回', // 展示的文字 (和图片 二选一)    
                textColor: '', // 文字颜色 (默认为白色)
                fontSize: '32', // 字号（默认32px）
                fontWeight: 'normal', // 是否加粗（默认不加粗）
                image: '' // 展示的图片url (和文字 二选一，文字优先级更高)
            }, () => {
                // 点击回调
                this.$router.back({
                    type: 'PUSH'
                })
            })
        },
        // eros:{
        //     appeared(params,options){
        //         this.playLottie();
        //     }
        // },
        methods: {
            playLottie() {
                var lottie = this.$refs.lottie;
                if (this.play) {
                    this.play = false;
                    lottie.pause();
                    this.status = "stop";
                } else {
                    this.play = true;
                    lottie.play();
                    this.status = 'play'
                }
            }
        }
    }

</script>
